<template>
  <!-- 性能监控 -->
  <div
    v-if="performance"
    style="
      position: fixed;
      top: 0px;
      right: 0px;
      z-index: 2147483647;
      color: #0dBC79;
      font-size: 13px;
      line-height: 30px;
      padding: 0 20px;
      background-color: #1E1E1E
    "
  >
    <div>
      <span>{{ 'DOM解析：' }}</span>
      <span>{{ performance.domInteractive }} ~ {{ performance.responseEnd }} = {{ (performance.domInteractive - performance.responseEnd) }} ms</span>
    </div>
    <div>
      <span>{{ 'HTML加载完成时间：' }}</span>
      <span>{{ performance.domContentLoadedEventEnd }} ~ {{ performance.fetchStart }} = {{ (performance.domContentLoadedEventEnd - performance.fetchStart) }} ms</span>
    </div>
    <div>
      <span>{{ '同步资源加载：' }}</span>
      <span>{{ performance.loadEventStart }} ~ {{ performance.domContentLoadedEventEnd }} = {{ (performance.loadEventStart - performance.domContentLoadedEventEnd) }} ms</span>
    </div>
    <div>
      <span>{{ '页面完全加载：' }}</span>
      <span>{{ performance.loadEventStart }} ~ {{ performance.fetchStart }} = {{ (performance.loadEventStart - performance.fetchStart) }} ms</span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'SunPerformanceMonitor',
  props: {
  },
  data() {
    return {
      performance: null
    }
  },
  computed: {
    ...mapGetters([
      'pagesName'
    ])
  },
  watch: {
    pagesName(name) {
      if (name) {
        setTimeout(() => {
          this.$set(this, 'performance', performance.timing)
          console.log('XXXXXXXXXXXXXXXXXXXXXX', performance.getEntries())
          // performance.clearMarks()
        }, 80)
      }
    }
  },
  methods: {
  }
}
</script>

